/**
 * Minor modification of jQuery UI's built-in slider functionality.  Creates a custom horizontal scroll bar.
 *
 * @copyright   2010, Blizzard Entertainment, Inc
 * @class       HSlider
 * @requires    jquery-ui-1.8.1.custom.min.js, /common/css/horizontal-slider.css
 * @example
 *
 *      HSlider.init($("#scroll-pane"), $("#scroll-content"), $("#scroll-bar"));
 *
 */

var HSlider = {
    scrollPane:    null,
    scrollContent: null,
    scrollBar:     null,
    handleHelper:  null,
    handle:        null,
    init: function(scrollPane, scrollContent, scrollBar, stopCallback) {
        //store elements
        HSlider.scrollPane =    scrollPane;
        HSlider.scrollContent = scrollContent;
        HSlider.scrollBar =     scrollBar;

        //bind scroll event
        HSlider.scrollBar.slider({
            slide: function(e, ui) {
                HSlider.adjustMargin(ui.value);
            }
        });

        if (Core.isCallback(stopCallback))
            HSlider.scrollBar.bind("slidestop", function(e, ui) { stopCallback(); });

        //bind handle events and wrap in helper
        HSlider.handle = HSlider.scrollBar.find('.ui-slider-handle')
            .mousedown(function(){
                HSlider.scrollBar.width(HSlider.handleHelper.width());
            })
            .mouseup(function(){
                HSlider.scrollBar.width('100%');
            })
            .wrap('<div class="ui-handle-helper-parent"></div>');

        //store handle helper
        HSlider.handleHelper = HSlider.handle.parent();

        //change overflow to hidden now that slider handles the scrolling
        HSlider.scrollPane.css('overflow','hidden');

        //init scrollbar size
        setTimeout(HSlider.sizeScrollBar, 10); //safari wants a timeout
    },
    adjustMargin: function(value) {
        var scrollContentWidth = HSlider.scrollContent.width();
        var scrollPaneWidth =    HSlider.scrollPane.width();

        if (scrollContentWidth > scrollPaneWidth) {
            HSlider.scrollContent.css('margin-left', Math.round(value/100 * (scrollPaneWidth - scrollContentWidth)) + 'px');
        } else {
            HSlider.scrollContent.css('margin-left', 0);
        }
    },
    sizeScrollBar: function() {
        //store widths
        var scrollContentWidth = HSlider.scrollContent.width();
        var scrollPaneWidth =    HSlider.scrollPane.width();

        var remainder = scrollContentWidth - scrollPaneWidth;
        var proportion = remainder / scrollContentWidth;
        var handleSize = scrollPaneWidth - (proportion * scrollPaneWidth);

        if (handleSize < 50)
            handleSize = 50;

        if (handleSize > 200)
            handleSize = 200;


        HSlider.handle.css({
            width: handleSize,
            'margin-left': -handleSize/2
        });
        HSlider.handleHelper
            .width('')
            .width(HSlider.scrollBar.width() - handleSize);

    },
    //reset slider value based on scroll content position
    resetValue: function() {
        var scrollContentWidth = HSlider.scrollContent.width();
        var scrollPaneWidth =    HSlider.scrollPane.width();

        var remainder = scrollPaneWidth - scrollContentWidth;
        var leftVal = HSlider.scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(HSlider.scrollContent.css('margin-left'));
        var percentage = Math.round(leftVal / remainder * 100);
        HSlider.scrollBar.slider("value", percentage);

    },
    //if the slider is 100% and window gets larger, reveal content
    reflowContent: function() {
        var scrollContentWidth = HSlider.scrollContent.width();
        var scrollPaneWidth =    HSlider.scrollPane.width();

        var showing = scrollContentWidth + parseInt( HSlider.scrollContent.css('margin-left') );
        var gap = scrollPaneWidth - showing;
        if (gap > 0) {
            HSlider.scrollContent.css('margin-left', parseInt( HSlider.scrollContent.css('margin-left') ) + gap);
        }
    }
};